<template>
	<view class="home">
     <search></search>
		<view class="swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<bolck v-for="(item,index) in swiperdata" :key="index">
					<swiper-item>
						<image :src="item.image_src" mode=""></image>
					</swiper-item>
				</bolck>
			</swiper>
		</view>
		<view class="navlist">
			<view class="nav" v-for="(item,index) in tabs" :key="index">
				<view>
					<image :src="item.image_src" mode=""></image>
				</view>
			</view>

		</view>
		<view class="foofter" v-for="(item,index) in floordata" :key="index">
			<view class="title">
				<image :src="item.floor_title.image_src" mode="widthFix"></image>
			</view>
			<view class="goods">
				<image v-for="(imgitem,imgindex) in item.product_list" :key="imgindex" :src="imgitem.image_src"
				 mode=""></image>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		swiperdata,
		catitems,
		floordata
	} from "../../api/index.js"
	export default {
		data() {
			return {
				swiperdata: "", // 轮播图数据
				tabs: '', // 导航栏
				floordata: "", // 楼层数据
			}
		},
		async onLoad() {
			const res1 = await swiperdata()
			this.swiperdata = res1.data.message // 轮播图赋值
			const res2 = await catitems()
			console.log(res2)
			this.tabs = res2.data.message // 导航栏
			const res3 = await floordata()
			console.log(res3)
			this.floordata = res3.data.message // 楼层

		},

	}
</script>

<style lang="less">
	.home {
		padding-top: 100rpx;
		.swiper {
			swiper {
				height: 340rpx;

				image {
					width: 100%;
					height: 340rpx;
				}
			}
		}

		.navlist {
			margin: 25rpx 0;
			width: 100%;
			display: flex;
			justify-content: space-around;

			.nav {
				image {
					width: 140rpx;
					height: 129rpx;
				}
			}
		}

		.foofter {
			margin-top: 20rpx;

			.title {
				image {
					width: 100%;
					height: 88rpx;
				}
			}

			.goods {
				padding: 20rpx 16rpx;

				image {
					width: 230rpx;
					height: 190rpx;
					border-radius: 6rpx;
				}

				image:nth-child(1) {
					height: 390rpx;
					float: left;
					margin-right: 10rpx;
				}

				image:nth-child(2),
				image:nth-child(4) {
					margin-right: 10rpx;
				}

				// image:nth-child(2), image:nth-child(3) {
				// 	margin-bottom: 10rpx;
				// }
			}
		}
	}
</style>
